<template>
  <header class="flex aic pl-15 jc-sb pr-15">
    <div class="flex aic">
      <span
        @click="onclick('new')"
        class="cursor bold h100p fcc"
        :class="{ active: store.isNew }"
        >新约</span
      >
      <span
        @click="onclick('old')"
        class="cursor bold h100p fcc ml-15"
        :class="{ active: !store.isNew }"
        >旧约</span
      >
    </div>
    <div>
      <p>今天已读 {{ store.todayReadNum }} 章</p>
      <p>今周已读 {{ store.weekReadNum }} 章</p>
    </div>
    <div>
      <!-- <span v-if="username" @click="logout" class="cursor">{{ username }}</span> -->
      <!-- <span v-else @click="router.push('/login')" class="cursor">立即登录</span> -->
      <!-- <span class="cursor">{{ store.user.role }}</span> -->
      <a href="/audio/index.html" class="flex aic fdc jc-c">
        <span class="cursor">({{ store.user.role }})</span>
        <span class="cursor mt-5">听讲道</span>
        </a>
    </div>
  </header>
</template>
<script setup>
import { useStore } from "../../pinia";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();

// flag new或old
const onclick = (flag) => {
  // 找到正在读的书卷
  let book = store.bookList.find(
    (item) => item.readStatus === 2 && !store.isNew === item.isNew
  );
  let bookName = "";
  // 若书本存在就定位到该书本
  if (book) {
    bookName = book.name;
  } else {
    bookName = flag === "new" ? "太" : "创";
  }
  store.getChapterList(bookName);
  store.$patch((state) => {
    state.isNew = !state.isNew;
    state.currBook = bookName;
  });
};

const logout = () => {
  store.$patch((state) => {
    state.bible_userId = "";
    state.username = "";
    state.password = "";
    state.isNew = true;
    state.currBook = "创";
  });
  router.push("/login");
};
</script>
